import React, { memo,useEffect } from 'react'
import {shallowEqual, useDispatch, useSelector} from 'react-redux'

import ZHThemeHeaderRCM from '@/components/theme-header-rcm'
import ZHTopRanking from '@/components/top-ranking'
import { getTopListAction } from '../../store/actionCreators'

import { RankingWrapper } from './style';


export default memo(function ZHRankingList() {
  
  const {upRanking,newRanking,originRanking} = useSelector(state => ({
    upRanking:state.getIn(["recommend", "upRanking"]),
    newRanking:state.getIn(["recommend", "newRanking"]),
    originRanking:state.getIn(["recommend", "originRanking"]),
  }), shallowEqual)

  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getTopListAction(0))
    dispatch(getTopListAction(2))
    dispatch(getTopListAction(3))
  },[dispatch])

  return (
    <RankingWrapper>
      <ZHThemeHeaderRCM title="榜单"/>
      <div className="tops">
        <ZHTopRanking info={upRanking}/>
        <ZHTopRanking info={newRanking}/>
        <ZHTopRanking info={originRanking}/>
      </div>
    </RankingWrapper>
  )
})
